/*------------------------------------
    #LOGIN - REGISTER
/*------------------------------------*/

/*body*/
.login
  padding-top: 100px
  +background-image(linear-gradient(to right, #5f2c82 10%, #49a09d 90%))
  +background-size(cover)

.border-circle
  +inline-block()
  width: 80px
  height: 80px
  background-color: #fff
  border: 5px solid #d7d7d7
  +border-radius(50%)
  & > .fa-user
    color: darken(#d7d7d7, 10%)

.panel-login
  position: relative

.panel-sign-in
  position: relative
  top: 0
  z-index: 2

.panel-sign-up
  position: absolute
  top: 0
  left: 0
  margin-top: 65px
  visibility: hidden
  +opacity(0)
  +transition(transform, 600ms, ease-out, visibility, 600ms, ease-out)
  +transform(translateY(-100px))
  z-index: 1
  &.in
    visibility: visible
    +opacity(1)
    +transition(transform, 600ms, ease-in, visibility, 600ms, ease-in)
    +transform(translateY(0))
  &.out
    visibility: hidden
    +opacity(0)

.panel-sign-in
  +transition(transform, 600ms, ease-in, visibility, 600ms, ease-in)
  +transform(translateY(0))
  &.out
    +transition(transform, 600ms, ease-out, visibility, 600ms, ease-out)
    +transform(translateY(-100px))
    visibility: hidden
    +opacity(0)

.alert
  padding: 15px
  margin-bottom: 20px
  border: 1px solid transparent
  +border-radius(4px)

.alert-show
  +opacity(1)
  visibility: visible
  +transform(translateY(0))
  +transition(transform, 300ms, ease-out, visibility, 300ms, ease-out)

.alert-hide
  +opacity(0)
  visibility: hidden
  +transform(translateY(-170px))
  +transition(transform, 300ms, ease-in, visibility, 300ms, ease-in)
